<template>
  <CSidebar
    fixed
    :minimize="minimize"
    :show.sync="show"
    class="all my_sidebar"
    style="background-color: white"
  >
    <CInput
      placeholder="搜索生产线..."
      v-if="$route.path.includes('processing')"
      v-model="input"
      style="
        width: 174px;
        margin-left: 12px;
        margin-top: 10px;
        margin-bottom: 5px;
      "
      maxlength="50"
      @keyup.enter="enterfaction"
    />
    <!-- 搜索 -->
    <img
      class="iconstylesearch"
      src="../../src/assets/icons/qcsearch.png"
      v-if="
        this.$store.state.ProductionLineRetrieval == 'yessearch'
          ? imgshow
          : false
      "
      alt
    />
    <!-- 清除 -->
    <img
      class="iconstyleoff"
      src="../../src/assets/icons/qcclear.png"
      v-if="
        this.$store.state.ProductionLineRetrieval == 'yessearch'
          ? imgoff
          : false
      "
      @click="clearmess"
      alt
    />
    <CRenderFunction
      flat
      ref="crenderfunction"
      :content-to-render="navlist !== undefined ? navlist : []"
      @click.native="changeSliderStyle($event, navlist)"
    />

    <div class="buttonhide">
      <Icon type="md-arrow-dropleft" @click="hideSideBar" />
    </div>
  </CSidebar>
</template>

<script>
export default {
  name: "TheSidebar",
  props: ["mag", "showData"],
  data() {
    return {
      lastTargetNode: {},
      childrenPathUrl: [],
      firstClass: true,
      childrens: [],
      onlytempi: 1,
      nosearch: "true",
      tempnav: [],
      tempnavtop: [],
      imgshow: true,
      imgoff: false,
      titleshow: [],
      opeanshow: [],
      input: "",
      minimize: false,
      nav: [
        //左侧目录树列表
        {
          _name: "CSidebarNav",
          _children: [],
          // _slots:this.test()
        },
      ],
      show: false,
      counter: 0,
    };
  },

  computed: {
    //处理返回nav的值
    navlist() {
      let that = this;
      let lastSecondLevel = that.$store.state.lastLeftPathStyleData.secondLevel;
      let lastThirdLevelId =
        that.$store.state.lastLeftPathStyleData.thirdLevelId;
      let secondLevel = that.$store.state.leftPathStyleData.secondLevel;
      let thirdLevelId = that.$store.state.leftPathStyleData.thirdLevelId;
      if (
        (that.$route.path == "/processing/processing" ||
          that.$route.path == "/processing") &&
        secondLevel
      ) {
        that.nav[0]._children.find((item) => {
          /*清除上一个的样式*/
          if (item.id == lastSecondLevel) {
            if (lastSecondLevel !== secondLevel) {
              that.$set(item, "show", false); //对象增加属性
            }

            if (item.children.length === 0) {
              that.$set(item, "color", "");
            } else {
              item.children.find((data) => {
                if (data.id == lastThirdLevelId) {
                  that.$set(data, "color", "");
                }
              });
            }
          }
          /*添加新样式*/
          if (item.id == secondLevel) {
            that.$set(item, "show", true); //对象增加属性
            if (item.children.length === 0) {
              that.$set(item, "color", "class");
            } else {
              item.children.find((data) => {
                if (data.id == thirdLevelId) {
                  that.$set(data, "color", "class");
                }
              });
            }
          }
        });
      }
      //跳转到任务中心页面为导航添加"HJ2A/B数据匹配"
      //为左侧目录添加HJ2A/B 选项
      if (this.$route.path == "/taskManage") {
        that.nav.map((item) => {
          //  if(item.id == 4 &&item._children.length !=0){
          if (item._children.length != 0) {
            item._children.map((item2) => {
              if (item2.name == '减灾监测管理' &&(item2.hasOwnProperty("_children")||item2._children.length !=0)) {
                let flag = item2._children.findIndex((item3) => {
                  return item3.name == "HJ2A/B数据匹配";
                });
                if (flag == -1) {
                  let obj = {
                    _name: "CSidebarNavItem",
                    name: "HJ2A/B数据匹配",
                    icon: "",
                    to: "/taskManage/TaskHJ2AB",
                  };
                  item2._children.push(obj);
                }
              }
            });
          }
        });
      }
      return that.nav;
    },
  },
  mounted() {
    // 获取路由，判断是否为加工处理和质检
    this.$root.$on("toggle-sidebar", () => {
      const sidebarOpened = this.show === true || this.show === "responsive";
      this.show = sidebarOpened ? false : "responsive";
    });
    this.$root.$on("toggle-sidebar-mobile", () => {
      const sidebarClosed = this.show === "responsive" || this.show === false;
      this.show = sidebarClosed ? true : "responsive";
    });
  },

  methods: {
    // 选择侧边栏的子选项更改其余选项的样式
    changeSliderStyle(Node, data) {
      // console.log("左边目录树",data)
      let that = this;
      //有路由跳转的才清除样式
      if (Node.target.href) {
        /*为了取消当前的样式*/
        let secondLevel = that.$store.state.leftPathStyleData.secondLevel;
        let thirdLevelId = that.$store.state.leftPathStyleData.thirdLevelId;
        that.nav[0]._children.find((item) => {
          /*添加新样式*/
          if (item.id == secondLevel) {
            that.$set(item, "show", true); //对象增加属性
            if (item.children.length === 0) {
              that.$set(item, "color", "");
            } else {
              item.children.find((data) => {
                if (data.id == thirdLevelId) {
                  that.$set(data, "color", "");
                }
              });
            }
          }
        });
        if (JSON.stringify(this.lastTargetNode) !== "{}") {
          this.lastTargetNode.target.style.backgroundColor = "white";
        }
        if (
          Node.target.className.indexOf("c-sidebar-nav-link") != -1 ||
          Node.target.className.indexOf("c-sidebar-nav-dropdown-toggle") != -1
        ) {
          //避免点击空白处选择全部
          Node.target.style.backgroundColor = this.$store.state.colorPickSeven;
          this.lastTargetNode = Node;
        }
      }
      //点击链接触发事件
      // let selectNode = Node;
      // let pathstr = window.location.hash; //获取当前路由
      // let pathstrr = pathstr.split("#");
    },
    //加工处理和质检以外的页面清除样式
    clearOtherClassName() {
      let that = this;
      that.$nextTick(function () {
        that.clearClassName();
      });
    },
    // 清除自定义样式的方法
    clearClassName() {
      let lista = $(".c-sidebar-nav a");
      let qclength = $(".c-sidebar-nav a").length;
      for (let q = 0; q < qclength; q++) {
        $(".c-sidebar-nav a").eq(q).removeClass("xyzz");
        $(".c-sidebar-nav a").eq(q).css("backgroundColor", ""); //去掉把之前设选中节点设置的背景色
      }
    },
    // 加工处理和质检页面左侧树置灰
    sidebarcolor() {
      let that = this;
      that.$nextTick(function () {
        // 页面切换先移除所有的自定义的classname
        that.clearClassName();
        // 移除结束
        let tempChild = "";
        //   判断左侧树的流程，目录置灰显示
        let qcdata1 = that.nav[0]._children;
        let mgnum = 0;
        let flag = 0;
        for (let q = 0; q < qcdata1.length; q++) {
          tempChild = qcdata1[q].children;
          flag = 0;
          for (let n = 0; n < tempChild.length; n++) {
            ++mgnum;
            if (tempChild.length !== 0 && tempChild[n].workflowNum == 0) {
              flag++;
              $(".c-sidebar-nav a").eq(mgnum).addClass("xyzz");
            }
          }
          if (flag === tempChild.length && qcdata1[q].workflowNum === 0) {
            $(".c-sidebar-nav a")
              .eq(mgnum - tempChild.length) //15 -15
              .addClass("xyzz");
          }
          ++mgnum;
        }
      });
    },
    // 检索框的清除图标事件
    clearmess() {
      this.input = "";
      this.imgoff = !this.imgoff;
      this.imgshow = !this.imgshow;
    },
    // 检索回车搜索结果

    enterfaction() {
      let pathstr = window.location.hash; //获取当前路由
      let patharr = pathstr.split("/");
      let searchdata = patharr[patharr.length - 1];
      let self = this;
      let data = this.nav[0]._children;
      if (
        searchdata == "qualityCheck" ||
        searchdata == "qualityCheck?from=qualityCheckCommon"
      ) {
        self.qcsearch(1);
      } else if (searchdata.indexOf("processing") != -1) {
        self.qcsearch(2);
      }
    },

    qcsearch(groupId) {
      let self = this;
      if (self.input != "") {
        //  查找替换
        let qcdata = self.nav[0]._children;
        for (let i = 0; i < qcdata.length; i++) {
          if (qcdata[i].name.indexOf(self.input) == -1) {
            //父无
            let tempChild = qcdata[i].children;
            let tempChildLength = tempChild.length;
            let flag = 0;
            for (let j = 0; j < tempChild.length; j++) {
              if (
                tempChild.length !== 0 &&
                tempChild[j].name.indexOf(self.input) == -1
              ) {
                //没有
                tempChild.splice(j, 1);
                j--;
                flag++;
              }
            }
            if (flag === tempChildLength) {
              qcdata.splice(i, 1);
              i--;
            }
          } else {
            //父有
            let tempChild1 = qcdata[i].children;
            for (let m = 0; m < tempChild1.length; m++) {
              if (tempChild1[m].name.indexOf(self.input) == -1) {
                //没有
                tempChild1.splice(m, 1);
                m--;
              }
            }
          }
          if (self.nav[0]._children[i]) {
            this.$set(self.nav[0]._children[i], "show", true);
          }
        }
        self.onlyfunction();
      } else {
        self.$parent.getTreeListByGroupId(groupId);
      }
    },
    // 函数自调一次
    onlyfunction() {
      if (this.onlytempi > 0) {
        this.onlytempi = this.onlytempi - 1;
        this.enterfaction();
      } else {
        this.onlytempi = 1;
      }
    },
    showfunction() {
      if (this.minimize == false) {
        this.$emit("toParent", "60px");
      } else {
        this.$emit("toParent", "200px");
      }
      this.minimize = !this.minimize;
    },

    // 检索框页面切换内容置空
    searchinputdel() {
      this.input = "";
    },

    hideSideBar() {
      this.show = false;
    },
  },
  watch: {
    show: {
      handler(val, oldValue) {
        this.$emit("update:showData", this.show);
      },
      immediate: true,
    },
    showData: {
      handler(val, oldValue) {
        this.show = val;
      },
      immediate: true,
    },
    input(newval) {
      if (newval == "") {
        this.input = "";
        this.imgshow = true;
        this.imgoff = false;
        this.enterfaction();
      } else {
        this.imgshow = false;
        this.imgoff = true;
      }
    },
  },
  deactivated() {
    this.firstClass = true;
  },
};
</script>


<style scoped>
.all {
  margin-top: 60px;
  background-color: #0a0a0a;
  width: 200px;
}
.my_sidebar .c-sidebar-nav-link {
  /* color:aqua; */
  white-space: pre-line;
  height: 100%;
}
.c-sidebar .c-sidebar-nav-link:hover,
.c-sidebar .c-sidebar-nav-dropdown-toggle:hover {
  background: #071041;
}
.c-sidebar .c-sidebar-nav-link,
.c-sidebar .c-sidebar-nav-dropdown-toggle {
  color: rgb(255, 255, 255);
}
.iconstylesearch {
  margin-top: 18px;
  position: absolute;
  right: 24px;
  width: 20px;
  height: 20px;
}
.iconstyleoff {
  position: absolute;
  margin-top: 18px;
  margin-left: 156px;
  width: 20px;
  height: 20px;
}
</style>

<style scoped >
.all {
  margin-top: 60px;
  background-color: white;
  width: 200px;
}
.my_sidebar .c-sidebar-nav-link {
  /* color:aqua; */
  white-space: pre-line;
  height: 100%;
}
.c-sidebar .c-sidebar-nav-link:hover,
.c-sidebar .c-sidebar-nav-link,
.iconstylesearch {
  margin-top: 18px;
  position: absolute;
  right: 24px;
  width: 20px;
  height: 20px;
}
.iconstyleoff {
  position: absolute;
  margin-top: 18px;
  margin-left: 156px;
  width: 20px;
  height: 20px;
}
.c-sidebar /deep/ .c-sidebar-nav-dropdown-toggle::after {
  background-image: url("../assets/icons/left.jpg") !important;
  background-size: 100%, 100%;
  width: 13px;
}
/*
  改背景样式
  */
/deep/ .ps,
/deep/.all {
  background-color: var(--leftBackGroundColor-color, #fff) !important;
}

/deep/.c-sidebar-nav-dropdown-toggle {
  background-color: var(--leftBackGroundColor-color, #fff) !important;
}

/deep/.c-sidebar-nav-dropdown.c-show {
  background-color: var(--leftBackGroundColor-color, #fff) !important;
}
/deep/.c-sidebar-nav-dropdown.c-show > .c-sidebar-nav-dropdown-items {
  background-color: var(--leftBackGroundColor-color, #fff) !important;
}

/*
  改字体样式
  */
/deep/ .c-sidebar-nav-dropdown-toggle,
/deep/.router-link-exact-active,
/deep/.c-sidebar-nav-icon {
  color: #515a6e !important;
}
/deep/.router-link-exact-active,
/deep/.c-active,
/deep/.c-sidebar-nav-link {
  color: #515a6e !important;
}
/deep/.c-sidebar-nav-item {
  color: #515a6e !important;
}
/deep/.c-sidebar-nav-link {
  color: #515a6e !important;
}
/deep/.router-link-exact-active,
/deep/.c-active,
/deep/.c-sidebar-nav-link {
  color: #515a6e !important;
}
.c-sidebar /deep/.c-sidebar-nav-dropdown-toggle,
.c-sidebar /deep/ .c-sidebar-nav-link {
  color: #515a6e !important;
}
/deep/ .c-sidebar.c-sidebar-nav-dropdown-toggle,
/deep/ .c-sidebar .c-sidebar-nav-link {
  color: #515a6e !important;
}

/*
   字体设置成灰色
  */
/deep/.c-sidebar-nav-item .xyzz {
  color: #c4c5c6 !important;
}

/*
  改hover样式
  */
/deep/.c-sidebar-nav-link:hover {
  background: var(--hover-color, #5d8bc4) !important;
}
/deep/.c-sidebar-nav-link:hover {
  background: var(--hover-color, #5d8bc4) !important;
}
.xyzz:hover {
  /*background:  var(--hover-color,  #5d8bc4)!important;*/
}
/deep/.c-sidebar-nav-dropdown-toggle:hover {
  background: var(--hover-color, #5d8bc4) !important;
}
.c-sidebar-nav-dropdown-toggle:hover {
  background: var(--hover-color, #5d8bc4) !important;
}

.c-sidebar /deep/.c-sidebar-nav-dropdown-toggle:hover,
.c-sidebar /deep/ .c-sidebar-nav-link:hover {
  background: var(--hover-color, #5d8bc4) !important;
}
/deep/ .c-sidebar.c-sidebar-nav-dropdown-toggle:hover,
/deep/ .c-sidebar .c-sidebar-nav-link:hover {
  background: var(--hover-color, #5d8bc4) !important;
}

.buttonhide {
  position: absolute;
  top: calc(50% - 90px);
  right: -10px;
  font-size: 26px;
  color: #0d86ff;
}

/*  左侧显示  */
/deep/.c-sidebar-nav-item .c-sidebar-nav-icon {
  visibility: visible;
}
/deep/.router-link-exact-active,
/deep/.c-active {
  background: var(--hover-color, #5d8bc4) !important;
}
</style>
